<template>
  <!-- 首页主内容区 -->
  <div class="main">
    <!-- 与header高度相同的盒子 -->
    <div class="headerCopy" :style="headerHeight && 'height:100px'"></div>
    <!-- 巨幕，将巨幕高度传过去 -->
    <GiantCurtain :mainHeight="mainHeight"/>
  </div>
</template>

<script>
import GiantCurtain from "@/components/home/homeMain/GiantCurtainCps";
export default {
  name: "HomeMain",
  components: {
    GiantCurtain,
  },
  data() {
    return {
      // headerHeight的高度是否为100
      headerHeight: true,
      // 巨幕高度
      mainHeight: 0,
    };
  },
  mounted() {
    // 设置监听窗口大小事件，当窗口大小改变时回调handleResize方法
    window.addEventListener("resize", this.handleResize);
    // 如果窗口宽度小于1009
    if (document.body.clientWidth < 1009) {
      // headerHeight不是100
      this.headerHeight = false;
    }
    // 初始化获取窗口大小
    this.handleResize();
    // 获取头部高度
    this.$bus.$on("getHeaderHeight", (data) => {
      // 如果headerHeight与要修改的不一样
      if (this.headerHeight != data) {
        // 将headerHeight修改
        this.headerHeight = data;
      }
    });
  },
  //销毁之前
  beforeDestroy() {
    //给bus解绑自定义事件,千万别什么都不写,会解绑所有
    this.$bus.$off("getHeaderHeight");
  },
  methods: {
    // 窗口大小发生改变时调用
    handleResize() {
      // 如果头部高度为100
      if (this.headerHeight) {
        this.mainHeight = document.body.clientHeight - 101;
      } else {
        this.mainHeight = document.body.clientHeight - 61;
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 首页主内容区
.main {
  .headerCopy {
    height: 60px;
  }
}
</style>